import React from 'react'
import Icon from '../../components/icon'
import { getProvince } from '../../actions'
import { connect } from 'inferno-mobx'
import Loading from '../../components/loading'
import styles from './index.scss'

@connect(['appStore'])
class ProvinceSelect extends React.Component {
  componentDidMount () {
    getProvince()
  }
  getId = (e) => {
    this.props.getProvinceId(e.target.value)
  }
  render () {
    const {leftImg, id = 1} = this.props
    return (
      <div className={styles.select}>
        <select className={styles.city} onChange={this.getId}>
          {this.props.appStore.provinceList.map((t, i) => (
            id === (i + 1)
            ? <option key={i} value={t.id} selected>{t.name}</option>
            : <option key={i} value={t.id}>{t.name}</option>
          ))}
        </select>
        <span className={styles.left}>{leftImg}</span>
        <span className={styles.right}>
          <Icon source={require('../../assets/svg/triangle.svg')} width='0.14rem' height='0.08rem' />
        </span>
      </div>
    )
  }
}

export default ProvinceSelect

